/**
 * 学习目标：使用 setState 修改状态
 * 要修改状态，需要通过 setState( {属性名: 属性值} )   -   和小程序的 setData()
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    count: 1,
  };

  // 建议后续项目 都用 箭头函数定义即可
  handleClick = () => {
    // console.log('this -----> ', this);
    // this.setState({ count: this.state.count + 1 });
    // ++this.state.count 原理 就是
    this.setState({ count: this.state.count + 1 });
    /* 
      常见错误 ❌❌
      1. this.state.count++;
      2. this.state.count += 1;
      3. this.setState({ count: ++this.state.count });
    */
  };

  render() {
    return (
      <div>
        我是App组件
        <div>当前 count - {this.state.count}</div>
        <button onClick={this.handleClick}>点我count + 1</button>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
